<template>
  <div class="person-container">
    <el-row>
      <el-col :span="6" class="theme-front-color user-info">
        <span class="info-item">登录账号: {{ account }}</span>
        <span class="info-item">昵称: {{ nickname }}</span>
        <span class="info-item">手机号: {{ phone }}</span>
        <span class="info-item">邮箱: {{ email }}</span>
        <el-button type="primary" class="change-password-btn" @click="changePassword">修改密码</el-button>
      </el-col>
      <el-col :span="18">
        <el-table :data="loginHistory" style="width: 100%">
          <el-table-column prop="loginTime" label="登录时间" width="180" />
          <el-table-column prop="loginIP" label="登录IP" width="180" />
          <el-table-column prop="deviceInfo" label="设备信息" />
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="loginHistory.length"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 导出组件
export default {
  data() {
    return {
      account: 'admin',
      nickname: '管理员',
      phone: this.generateRandomPhone(),
      email: this.generateRandomEmail(),
      // 修改部分：对登录历史按登录时间倒序排列
      loginHistory: this.generateLoginHistory(10).sort((a, b) => new Date(b.loginTime) - new Date(a.loginTime)),
      currentPage: 1
    }
  },
  methods: {
    /**
     * 生成随机手机号
     * @returns {string} 随机手机号
     */
    generateRandomPhone() {
      const prefixes = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '145', '147', '150', '151', '152', '153', '155', '156', '157', '158', '159', '176', '177', '178', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189'];
      const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
      const suffix = Math.floor(10000000 + Math.random() * 90000000);
      return prefix + suffix;
    },
    /**
     * 生成随机邮箱
     * @returns {string} 随机邮箱
     */
    generateRandomEmail() {
      const domains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'qq.com', '163.com'];
      const randomString = Math.random().toString(36).substring(7);
      const domain = domains[Math.floor(Math.random() * domains.length)];
      return `${randomString}@${domain}`;
    },
    /**
     * 生成随机日期
     * @returns {string} 随机日期
     */
    generateRandomDate() {
      const start = new Date(2023, 0, 1);
      const end = new Date();
      return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toLocaleString();
    },
    /**
     * 生成随机IP地址
     * @returns {string} 随机IP地址
     */
    generateRandomIP() {
      return Array.from({ length: 4 }, () => Math.floor(Math.random() * 256)).join('.');
    },
    /**
     * 生成随机设备信息
     * @returns {string} 随机设备信息
     */
    generateRandomDevice() {
      const devices = ['Windows PC', 'MacBook', 'iPhone', 'Android Phone', 'iPad'];
      return devices[Math.floor(Math.random() * devices.length)];
    },
    /**
     * 生成登录历史记录
     * @param {number} count 记录数量
     * @returns {Array} 登录历史记录数组
     */
    generateLoginHistory(count) {
      const history = [];
      for (let i = 0; i < count; i++) {
        history.push({
          loginTime: this.generateRandomDate(),
          loginIP: this.generateRandomIP(),
          deviceInfo: this.generateRandomDevice()
        });
      }
      return history;
    },
    /**
     * 处理每页显示数量变化
     * @param {number} val 每页显示数量
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    /**
     * 处理当前页码变化
     * @param {number} val 当前页码
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped>
.person-container {
  padding: 20px;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-item {
  display: block;
  font-size: 14px;
}

.change-password-btn {
  margin-top: 10px;
  width: fit-content;
}
</style>
